<template>
  <div class="report">
    <div class="report-header">
      <!-- 左侧标题 -->
      <div class="report-header-img"></div>
      <!-- 右侧 -->
      <div class="report-header-admin">
        <div class="report-header-admin__img">
          <i class="el-icon-user" v-if="!userData.avatar"></i>
          <img class="user-img" v-if="userData.avatar" :src="'http://101.42.6.163:8686' + userData.avatar" />
        </div>
        <div class="report-header-admin__name">
          {{ userData.nickName || "--" }}
        </div>
        <el-popover placement="bottom" width="40" trigger="click">
          <div class="report-header-loginout">退出登录</div>
          <i class="el-icon-arrow-down report-header-admin__icon" slot="reference"></i>
        </el-popover>
      </div>
    </div>
    <div class="report-mask" v-if="isMask">
      <!-- 提示操作1 -->
      <div class="report-mask-toltip toltip-one" v-if="isTolTip === 1">
        <div class="report-mask-toltip-centen">
          此处是报告题纲，您可以添加或者删除报告题纲
        </div>
        <div class="report-mask-toltip-btm">
          <el-button type="text" @click="handMaskClose">跳过</el-button>
          <el-button type="text" @click="isTolTip++">下一步</el-button>
        </div>
      </div>
      <!-- 提示操作2 -->
      <div class="report-mask-toltip toltip-two" v-if="isTolTip === 2">
        <div class="report-mask-toltip-centen">
          此处是报告内容，点击可以直接编辑报告详情
        </div>
        <div class="report-mask-toltip-btm">
          <el-button type="text" @click="handMaskClose">跳过</el-button>
          <el-button type="text" @click="isTolTip++">下一步</el-button>
        </div>
      </div>
      <!-- 提示操作3 -->
      <div class="report-mask-toltip toltip-three" v-if="isTolTip === 3">
        <div class="report-mask-toltip-centen">
          此处是图表数据筛选条件，您可以在此进行图表数据的筛选
        </div>
        <div class="report-mask-toltip-btm">
          <el-button type="text" @click="handMaskClose">跳过</el-button>
          <el-button type="text" @click="isTolTip++">下一步</el-button>
        </div>
      </div>
      <!-- 提示操作4 -->
      <div class="report-mask-toltip toltip-four" v-if="isTolTip === 4">
        <div class="report-mask-toltip-centen">
          报告编辑完成之后，您可以在此进行导出
        </div>
        <div class="report-mask-toltip-btm">
          <el-button type="text" @click="isTolTip = 1">再看一遍</el-button>
          <el-button type="text" @click="handMaskClose">我已了解</el-button>
        </div>
      </div>
    </div>
    <div class="report-body">
      <!-- 标题 -->
      <div class="report-title">
        <div class="report-go" @click="handGo">
          <i class="el-icon-back"></i>
          返回
        </div>
        <div style="padding-left: 205px; flex: 1; font-size: 20px;">{{ reportId }}</div>
        <!-- 按钮 -->
        <div class="report-btn">
          <!-- 插入图表 -->
          <!--<div class="report-btn-add">
            <img src="./assets/images/chart.png" alt="" />
            <div class="report-btn-add-title" @click="isChart = !isChart">
              插入图表
            </div>
            <div class="report-btn-add-popup" v-if="isChart">
              <div class="report-btn-add-popup-left">
                <div
                  class="report-btn-add-popup-left-li"
                  :class="[
                    {
                      'report-btn-add-popup-left-li-select':
                        selectData.num === item.num,
                    },
                  ]"
                  v-for="item in testdata"
                  :key="item.num"
                  @click="handSelectChange(item)"
                >
                  {{ item.label }}
                </div>
              </div>
              <div class="report-btn-add-popup-right">
                <div
                  class="report-btn-add-popup-right-li"
                  v-for="citem in selectData.children"
                  :key="citem.num"
                  @click="handAddChart"
                >
                  {{ citem.label }}
                </div>
              </div>
            </div>
          </div> -->
          <!-- 另存 -->
          <div class="report-btn-btn" @click="saveOtherRepotr">另存报告</div>
          <!-- 导出 -->
          <el-popover placement="bottom" popper-class="report-popup" title="导出文件格式" width="153" trigger="click">
            <div class="report-popup-centen">
              <div>PDF</div>
              <div>Word</div>
            </div>
            <div class="report-btn-btn report-left" slot="reference">
              导出报告
            </div>
          </el-popover>
        </div>
      </div>
      <!-- 内容 -->
      <div class="report-content">
        <div class="report-content-left">
          <div class="report-left-title">报告提纲</div>
          <div class="report-left-tree">
            <el-tree :data="left_data" :props="defaultProps" :default-expand-all="true" @node-drag-end="handleDragEnd"
              :allow-drop="allowDrop" draggable @node-click="handleNodeClick" class="flow-tree">
              <div class="custom-tree-node" slot-scope="{ data }">
                <div class="custom-tree-node__label">
                  <span>{{ data.name }}</span>
                </div>
                <div class="custom-tree-node__add">
                  <el-popover ref="popover" placement="left-start" title="" width="190" trigger="hover"
                    popper-class="message-popover">
                    <div class="popover-list">
                      <div class="popover-item" v-if="template_list[templateIndex].children" v-for="(val, i) in template_list[templateIndex]
            .children" :key="i" @click.stop="addNameHandle(val)">
                        {{ val.name }}
                      </div>
                    </div>
                  </el-popover>
                  <i v-popover:popover class="el-icon-plus" @mouseover="getTemplateIndex(data)" v-if="data.isAdd"></i>

                  <i class="el-icon-delete" @click.stop="append(data)" v-else></i>
                </div>
              </div>
            </el-tree>
          </div>
        </div>
        <div class="report-content-body">
          <div class="report-content-box">
            <div class="report-content-temp" v-for="(item, index) in data" :key="index">
              <!-- <div class="report-content-temp-text">
                {{ item.text || "-" }}
              </div> -->
              <el-input class="report-content-temp-title" v-model="item.name"
                @change="() => changeTitleHandle(item)"></el-input>
              <!-- <div class="report-content-temp-title">
                {{  }}
              </div> -->
              <div v-for="citem in item.children" :key="citem.num">
                <!-- <div class="report-content-temp-title1">
                  {{  }}
                </div> -->
                <el-input class="report-content-temp-title1" v-model="citem.name"
                  @change="() => changeTitleHandle(citem)"></el-input>
                <!-- 图表区域 -->
                <div v-if="citem.chartList.length > 0" class="report-content-temp-chart"
                  @click.stop="showIsmodel(citem)">
                  <i class="el-icon-circle-close" @click.stop="delChartHanlde(citem)"></i>
                  <div class="report-content-temp-chart-temp" v-for="(chartInfo, index) in citem.chartList"
                    :key="chartInfo.chartType">
                    <div class="report-content-temp-chart-box" :id="citem.id"></div>
                    <!-- <div class="report-content-temp-chart-title">
                      图 1-1 专利申请趋势
                    </div> -->
                  </div>
                </div>
                <!-- 表格区域 -->
                <div class="report-content-temp-table" v-if="citem.tableData">
                  <i class="el-icon-circle-close" @click="delTableHanlde(citem)"></i>
                  <el-table style="width: 100%" max-height="500" :data="citem.tableData.rows"
                    :row-class-name="tableRowClassName">
                    <el-table-column v-for="(val, tindex) in citem.tableData.titles" :key="tindex" :prop="val.prop"
                      :label="val.label" :show-overflow-tooltip="true" align="center">
                      <!-- 纵向标题列（污染指标） -->
                      <template slot-scope="scope">
                        <div v-if="!val['isBtn']">
                          {{ scope.row[val.prop] }}
                        </div>
                        <div v-else>
                          <el-button v-if="val.prop !== 'option'" size="mini" icon="el-icon-search"
                            @click="handShowDrawe(val)">查看</el-button>
                          <el-button class="del-btn" type="danger" size="mini" v-else>删除</el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <el-input class="report-content-temp-texted" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入内容" v-model="citem.analysisSummary" @change="() => changSummary(citem)"
                  @blur="blurHanlde(citem)" @focus="focusHanlde(citem)" :class="citem.fousShow ? 'inputaear' : ''">
                </el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="report-content-right" @click.self="touchRIghtHandle">
          <!-- 条件区域 -->
          <!-- TODO:展示写固定只做展示 -->
          <div class="report-content-right-model" v-if="!isModel">
            <i class="el-icon-s-data"></i>
            点击图表开始数据分析
          </div>
          <div class="report-content-right-nomodel" v-else @click="touchRIghtHandle">
            <!-- 标题 -->
            <div class="report-content-right-title">图表数据筛选</div>
            <!-- <div class="datafilter-dialog__body-temp">
              <div style="margin-right: 10px">选择专题&nbsp;&nbsp;&nbsp;</div>
              <div class="thr-select" @click.stop="clickBigHanlde">
                
                <div
                  class="thr-select-playolder"
                  :class="selectBig_name.length > 0 ? 'thr-select-name' : ''"
                >
                  {{
                    selectBig_name.length > 0
                      ? String(selectBig_name)
                      : "请选择专题"
                  }}
                </div>
                
                <i class="el-icon-arrow-down thr-select-icon"></i>

                <div class="thr-select-popup" v-if="isSubject" @click.stop="">
                  <div v-if="big_data.length > 0">
                    <el-input
                      class="datafilter-title__temp-ipt"
                      suffix-icon="el-icon-search"
                      v-model="big_search"
                      placeholder="请输入专题名称"
                      @change="subjectdatasetListGo"
                    ></el-input>
                    <div class="thr-select-ul">
                      <div
                        class="thr-select-li"
                        v-for="(item, index) in big_data"
                        :key="item.id"
                      >
                        <el-checkbox
                          @change="changeSelectHandleTwo"
                          v-model="item.value"
                          >{{ item.name }}</el-checkbox
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> -->
            <!-- <div class="datafilter-dialog__body-temp">
              <div style="margin-right: 10px">选择数据集</div>

            </div> -->
            <el-row type="flex" align="middle">
              <el-col :span="6">
                选择数据集
              </el-col>
              <el-col :span="18">
                <div style="margin-right: 0" class="thr-select" @click.stop="clickSmallHandle">
                  <div class="thr-select-playolder" :class="select_name.length > 0 ? 'thr-select-name' : ''">
                    {{
            select_name.length > 0
              ? String(select_name)
              : "请选择需要筛选的数据集"
          }}
                  </div>
                  <!-- <div class="thr-select-line"></div> -->
                  <i class="el-icon-arrow-down thr-select-icon"></i>

                  <div class="thr-select-popup" v-if="isSelect" @click.stop="">
                    <div v-if="small_data.length > 0">
                      <el-input class="datafilter-title__temp-ipt" suffix-icon="el-icon-search" v-model="search_name"
                        placeholder="请输入专题名称" @change="subjectdatasetListGo" size="mini"></el-input>
                      <div class="thr-select-ul">
                        <div class="thr-select-li" v-for="(item, index) in small_data" :key="item.id">
                          <el-checkbox @change="changeSelectHandle" v-model="item.value">{{ item.name }}</el-checkbox>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>

            <!-- <div class="report-content-right-tiao" v-show="fisrtShow">
              <div class="report-content-right-tiao-label" v-if="firstDimFieldShow=='专利申请日'||firstDimFieldShow=='专利公开日'">时间字段</div>
              <el-radio v-if="firstDimFieldShow=='专利申请日'" value="1" label="1">申请日</el-radio>
              <el-radio v-if="firstDimFieldShow=='专利公开日'"  value="2" label="2">公开日</el-radio>
            </div> -->
            <div v-show="fisrtShow">
              <el-divider content-position="center">第一维度</el-divider>

              <el-row v-if="firstDimType == 'EntityType'" type="flex" align="middle">
                <el-col :span="6">实体类型</el-col>
                <el-col :span="18">
                  <el-select v-model="firstDimFieldShow" size="mini">
                    <el-option v-for="item in entityTypesList" :key="item.index" :value="item">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>

              <el-row v-if="firstDimType == 'time'" type="flex" align="middle">
                <el-col :span="6">{{ firstDimFieldShow == "专利公开日" ? "申请日" : "公开日" }}</el-col>
                <el-col :span="8">
                  <el-date-picker v-model="startYear" size="mini" type="year" placeholder="开始年份" style="width: 100%;"
                    :clearable="false">
                  </el-date-picker></el-col>
                <el-col :span="2" style="text-align: center;">-</el-col>
                <el-col :span="8">
                  <el-date-picker v-model="endYear" size="mini" type="year" placeholder="结束年份" style="width: 100%;"
                    :clearable="false">
                  </el-date-picker></el-col>
              </el-row>

              <el-row v-if="firstDimType == 'rank'" type="flex" align="middle">
                <el-col :span="6">
                  {{ firstDimFieldShow == "IPC小类" ? "IPC排名" : "排名选择" }}
                </el-col>
                <el-col :span="8"><el-input v-model="startYear" size="mini" type="number" placeholder="开始排名"
                    style="width: 100%;" :clearable="false"></el-input></el-col>
                <el-col :span="2" style="text-align: center;">-</el-col>
                <el-col :span="8"><el-input v-model="endYear" size="mini" type="number" placeholder="末尾排名"
                    style="width: 100%;" :clearable="false"></el-input></el-col>
              </el-row>


            </div>

            <div v-show="secondShow">

              <el-divider content-position="center">第二维度</el-divider>

              <el-row v-if="secondDimType == 'time'" type="flex" align="middle">
                <el-col :span="6">{{ secondDimFieldShow == "专利公开日" ? "申请日" : "公开日" }}</el-col>
                <el-col :span="8">
                  <el-date-picker v-model="startRank" size="mini" type="year" placeholder="开始年份" style="width: 100%;"
                    :clearable="false">
                  </el-date-picker></el-col>
                <el-col :span="2" style="text-align: center;">-</el-col>
                <el-col :span="8">
                  <el-date-picker v-model="endRank" size="mini" type="year" placeholder="结束年份" style="width: 100%;"
                    :clearable="false">
                  </el-date-picker></el-col>
              </el-row>

              <el-row v-if="secondDimType == 'rank'" type="flex" align="middle">
                <el-col :span="6">
                  {{ secondDimFieldShow == "IPC小类" ? "IPC排名" : "排名选择" }}
                </el-col>
                <el-col :span="8"><el-input v-model="startRank" size="mini" type="number" placeholder="开始排名"
                    style="width: 100%;" :clearable="false"></el-input></el-col>
                <el-col :span="2" style="text-align: center;">-</el-col>
                <el-col :span="8"><el-input v-model="endRank" size="mini" type="number" placeholder="末尾排名"
                    style="width: 100%;" :clearable="false"></el-input></el-col>
              </el-row>

            </div>


            <!-- <div class="report-content-right-tiao" v-show="secondShow">
              <div class="report-content-right-tiao-label" style="margin-right: 5px" v-if="secondDimType == 'time'">
                {{ secondDimFieldShow == "专利公开日" ? "申请日" : "公开日" }}
              </div>
              <div class="report-content-right-tiao-label" style="margin-right: 5px" v-if="secondDimType == 'rank'">
                {{ secondDimFieldShow == "IPC小类" ? "IPC排名" : "排名选择" }}
              </div>
              <el-date-picker v-model="startRank" type="year" placeholder="开始年份" class="report-content-right-tiao-box"
                v-if="secondDimType == 'time'">
              </el-date-picker>
              <el-input v-if="secondDimType == 'rank'" class="report-content-right-tiao-box" v-model="startRank"
                type="number" placeholder="开始排名"></el-input>
              -
              <el-date-picker v-model="endRank" type="year" placeholder="结束年份" class="report-content-right-tiao-box"
                v-if="secondDimType == 'time'">
              </el-date-picker>
              <el-input v-if="secondDimType == 'rank'" class="report-content-right-tiao-box" v-model="endRank"
                type="number" placeholder="末尾排名"></el-input>
            </div> -->
            <div class="report-content-right-btn">
              <el-button :disabled="select_idList.length == 0" size="mini" type="success"
                @click="changeRoportHanlde">立即分析</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 关键字 -->
    <el-dialog title="温馨提示" width="332px" class="analyzepage-close" :visible.sync="delShow" :show-close="false">
      <div class="analyzepage-close__body">确定删除所选数据吗？</div>
      <div slot="footer" class="close-footer">
        <el-button @click="delShow = false">取 消</el-button>
        <el-button type="danger" @click="deldelCustomHandle">确定</el-button>
      </div>
    </el-dialog>
    <el-drawer title="关键词列表" custom-class="report-text-drawer" :visible.sync="drawerText">
      <div class="report-text-box">
        <!-- temp -->
        <div class="report-text-box-header">
          <div class="report-text-box-temp">
            <el-checkbox v-model="isTextAll">关键词列表</el-checkbox>
            <div>词频</div>
          </div>
        </div>
        <div class="report-text-box-body">
          <div class="report-text-box-temp" v-for="item in textList" :key="item.text">
            <el-checkbox v-model="item.checked">{{ item.text }}</el-checkbox>
            <div>{{ item.num }}</div>
          </div>
        </div>
        <div class="report-text-box-btm" @click="drawerText = false">保存</div>
      </div>
    </el-drawer>
    <!-- 类专利 -->
    <el-drawer title="专利列表" custom-class="report-subject-drawer" :visible.sync="drawerSubject">
      <!-- 内容区域 -->
      <div class="report-subject-right-body">
        <div class="report-subject-right-temp" v-for="(item, i) in dataList" :key="i">
          <el-checkbox class="report-subject-right-temp-checkbox" v-model="item.checked"></el-checkbox>
          <div class="report-subject-right-temp-body">
            <div class="report-subject-right-temp-title">
              {{ item.title }}
            </div>
            <div class="report-subject-right-temp-content">
              {{ item.text }}
            </div>
            <div class="report-subject-right-temp-ul">
              <div class="report-subject-right-temp-li" v-for="item in item.typeList" :key="item.name">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 页数 -->
      <div class="report-subject-right-btm">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage2" layout="prev, pager, next" :total="dataList.lenght">
        </el-pagination>
      </div>
    </el-drawer>
    <el-dialog title="创建自定义提纲" width="429px" class="analyzepage-dialog" :visible.sync="isanalyzepage"
      :show-close="false">
      <div class="analyzepage-dialog__body">
        <div class="analyzepage-dialog__body-temp">
          <div>提纲名称</div>
          <el-input class="analyzepage-dialog__body-temp-ipt" v-model="addname" placeholder="请输入自定义提纲名称"></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isanalyzepage = false">取 消</el-button>
        <el-button type="primary" @click="addanalysisHandle">确认创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { analysisList } from "@/api/modules/analysis";
import { subjectList } from "@/api/modules/subject";
import { subjectdatasetList } from "@/api/modules/subject_data";
import { Loading } from "element-ui";
import {
  customList,
  delCustom,
  addCustom,
  templateList,
  editCustom,
} from "@/api/modules/custom";
import {
  getReportContent,
  customSort,
  saveReport,
  changeReport,
  sortModify,
  fetchReportTitle,
  fetchEntityTypes,
} from "@/api/modules/report";
import * as echarts from "echarts";
export default {
  name: "ReportPage",
  data() {
    return {
      delShow: false,
      isModel: false,
      value1: [new Date(), new Date()],
      selectData: {
        label: "趋势分析",
        num: "1",
        name: "1、趋势分析",
        isAdd: true,
        text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
        children: [
          {
            label: "公开趋势",
            num: "1.1",
            name: "1.1、公开趋势",
            chartList: [
              {
                chartType: "line",
              },
            ],
            text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
            tableHeader: [
              {
                label: "类名称",
                prop: "name",
                isBtn: false,
              },
              {
                label: "专利数量",
                prop: "num",
                isBtn: false,
              },
              {
                label: "关键词",
                prop: "text",
                isBtn: true,
              },
              {
                label: "类专利列表",
                prop: "list",
                isBtn: true,
              },
              {
                label: "操作",
                prop: "option",
                isBtn: true,
              },
            ],
            tableData: [
              {
                id: 1,
                name: "专利",
                num: 10,
              },
            ],
          },
          // {
          //   label: "申请趋势",
          //   num: "1.2",
          //   chartList: [
          //     {
          //       chartType: "bar",
          //     },
          //   ],
          //   text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
          //   tableHeader: [
          //     {
          //       label: "类名称",
          //       prop: "name",
          //       isBtn: false,
          //     },
          //     {
          //       label: "专利数量",
          //       prop: "num",
          //       isBtn: false,
          //     },
          //     {
          //       label: "关键词",
          //       prop: "text",
          //       isBtn: true,
          //     },
          //     {
          //       label: "类专利列表",
          //       prop: "list",
          //       isBtn: true,
          //     },
          //     {
          //       label: "操作",
          //       prop: "option",
          //       isBtn: true,
          //     },
          //   ],
          //   tableData: [
          //     {
          //       id: 1,
          //       name: "专利",
          //       num: 10,
          //     },
          //   ],
          // },
          // {
          //   label: "申请趋势",
          //   num: "1.2",
          //   chartType: "bar",
          // },
          // {
          //   label: "技术功效趋势",
          //   num: "1.3",
          // },
        ],
      },
      isChart: false,
      drawerText: false, // 是否显示关键字
      drawerSubject: false, // 是否显示类专利
      testdata: [
        {
          label: "趋势分析",
          num: "1",
          isAdd: true,
          text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
          children: [
            {
              label: "公开趋势",
              num: "1.1",
              chartList: [
                {
                  chartType: "line",
                },
              ],
              text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
              tableHeader: [
                {
                  label: "类名称",
                  prop: "name",
                  isBtn: false,
                },
                {
                  label: "专利数量",
                  prop: "num",
                  isBtn: false,
                },
                {
                  label: "关键词",
                  prop: "text",
                  isBtn: true,
                },
                {
                  label: "类专利列表",
                  prop: "list",
                  isBtn: true,
                },
                {
                  label: "操作",
                  prop: "option",
                  isBtn: true,
                },
              ],
              tableData: [
                {
                  id: 1,
                  name: "专利",
                  num: 10,
                },
              ],
            },
            {
              label: "申请趋势",
              num: "1.2",
              chartList: [
                {
                  chartType: "bar",
                },
              ],
              text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
              tableHeader: [
                {
                  label: "类名称",
                  prop: "name",
                  isBtn: false,
                },
                {
                  label: "专利数量",
                  prop: "num",
                  isBtn: false,
                },
                {
                  label: "关键词",
                  prop: "text",
                  isBtn: true,
                },
                {
                  label: "类专利列表",
                  prop: "list",
                  isBtn: true,
                },
                {
                  label: "操作",
                  prop: "option",
                  isBtn: true,
                },
              ],
              tableData: [
                {
                  id: 1,
                  name: "专利",
                  num: 10,
                },
              ],
            },
            // {
            //   label: "申请趋势",
            //   num: "1.2",
            //   chartType: "bar",
            // },
            // {
            //   label: "技术功效趋势",
            //   num: "1.3",
            // },
          ],
        },
        {
          label: "技术分析",
          num: "2",
          isAdd: true,
          text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
          children: [
            {
              label: "公开趋势",
              num: "2.1",
              chartList: [
                {
                  chartType: "line",
                },
              ],
              text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
              tableHeader: [
                {
                  label: "类名称",
                  prop: "name",
                  isBtn: false,
                },
                {
                  label: "专利数量",
                  prop: "num",
                  isBtn: false,
                },
                {
                  label: "关键词",
                  prop: "text",
                  isBtn: true,
                },
                {
                  label: "类专利列表",
                  prop: "list",
                  isBtn: true,
                },
                {
                  label: "操作",
                  prop: "option",
                  isBtn: true,
                },
              ],
              tableData: [
                {
                  id: 1,
                  name: "专利",
                  num: 10,
                },
              ],
            },
            {
              label: "技术趋势",
              num: "2.2",
              chartList: [
                {
                  chartType: "bar",
                },
              ],
              text: '本报告主要分析缓控释肥领域的技术演化规律，预测该领域的技术演进方向。通过制定检索策略，从 DI 数据库（Derwent Innovations Index）中下载专利数据。检索策略为：TI=("Slowrelease* fertilizer*") OR TI= ("Controll* release* fertilizer*") OR TI=(“stable* fertilizer*")，检索时间为 2019 年 11 月 1 日，仅检索发明专利，共检索到 4669 件专利。数据下载后经过精炼与排除，人工阅读专利标题筛选掉与领域无关的专利，共得到最终分析集合 3155 件。',
              tableHeader: [
                {
                  label: "类名称",
                  prop: "name",
                  isBtn: false,
                },
                {
                  label: "专利数量",
                  prop: "num",
                  isBtn: false,
                },
                {
                  label: "关键词",
                  prop: "text",
                  isBtn: true,
                },
                {
                  label: "类专利列表",
                  prop: "list",
                  isBtn: true,
                },
                {
                  label: "操作",
                  prop: "option",
                  isBtn: true,
                },
              ],
              tableData: [
                {
                  id: 1,
                  name: "专利",
                  num: 10,
                },
              ],
            },
          ],
        },
      ],
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      select_id: "",
      isTextAll: false, // 是否全选关键词
      textList: [
        {
          checked: false,
          text: "broccoli",
          num: 1345,
        },
        {
          checked: false,
          text: "broccoli",
          num: 1345,
        },
        {
          checked: false,
          text: "broccoli",
          num: 1345,
        },
        {
          checked: false,
          text: "broccoli",
          num: 1345,
        },
        {
          checked: false,
          text: "broccoli",
          num: 1345,
        },
        {
          checked: false,
          text: "broccoli",
          num: 1345,
        },
      ],
      currentPage2: 10,
      dataList: [
        {
          title: "基于生物技术的农业生产提高方法",
          checked: false,
          text: "Promotion and Management System for Eco-Friendly Agricultural Practices",
          typeList: [
            {
              name: "申请人：Fusion Innovators, Inc.",
            },
          ],
        },
      ],
      isMask: false, // 初始化显示提示框
      isTolTip: 1, // 默认显示第一条
      isanalyzepage: false,
      addname: "",
      tableData: [],
      graph: {},
      left_data: [],
      search_name: "",
      small_data: [],
      big_data: [],
      isSelect: false,
      isSubject: false,
      radio: "1",
      big_search: "",
      visible: false,
      template_list: [],
      templateIndex: 0,
      reportId: "",
      fousShow: true,
      select_name: [],
      selectBig_name: [],
      idArray: [],
      select_idList: [],
      startYear: "",
      endYear: "",
      fenxiID: "",
      userData: {},
      fisrtShow: false,
      firstDimType: "",
      secondShow: false,
      secondDimType: "",
      startRank: 0,
      endRank: 0,
      firstDimFieldShow: "",
      secondDimFieldShow: "",
      entityTypesList: [],
      selectEntityTypes: '',
    };
  },
  watch: {
    isTextAll(val) {
      this.textList.map((res) => {
        res.checked = val;
        return res;
      });
    },
  },
  mounted() {
    const userDataFromLocalStorage = JSON.parse(
      localStorage.getItem("userData")
    );
    this.userData = userDataFromLocalStorage || {};
    this.reportId = this.$route.query.report;
    this.subjectdatasetListGo();
    this.getcustomList();
    this.getReportTitle();
    this.getEntityTypes();
    // this.selectData = this.data[0];


  },
  methods: {


    changeTitleHandle(item) {
      editCustom({
        id: item.id,
        name: item.name,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    delChartHanlde(data) {
      changeReport({
        id: data.paramConfigCustom.id,
        delGraph: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            showClose: true,
          });
          this.getcustomList();
          this.$forceUpdate();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    delTableHanlde(data) {
      changeReport({
        id: data.paramConfigCustom.id,
        delTable: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            showClose: true,
          });
          data.tableData = {};
          this.$forceUpdate();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    changeRoportHanlde() {
      if (this.firstDimType == "time") {
        var date1 = this.startYear;
        var date2 = this.endYear;
      } else if(this.firstDimType == "rank"){
        var date1 = this.startRank;
        var date2 = this.endRank;
      }

      if (this.secondDimType == "time") {
        var date3 = new Date(this.startRank).getFullYear();
        var date4 = new Date(this.endRank).getFullYear();
      } else if (this.secondDimType == "rank") {
        var date3 = this.startRank;
        var date4 = this.endRank;
      } else {
        var date3 = "";
        var date4 = "";
      }

      changeReport({
        id: this.fenxiID,
        analysisDatasetId: this.select_idList[0],
        firstDimRange: this.entityTypesList ? this.entityTypesList : `${date1}-${date2}`,
        secondDimRange: !date3 ? "" : `${date3}-${date4}`,
      }).then((res) => {
        if (res.code == 200) {
          this.getReportContentHandle();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    saveOtherRepotr() {
      saveReport({
        id: this.reportId,
        name: "另存报告",
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "另存成功",
            type: "success",
            showClose: true,
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    allowDrop(draggingNode, dropNode, type) {
      if (!dropNode.data.children && type == "inner") {
        return false;
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      return true;
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      if (dropType == "after") {
        var id = draggingNode.data.id;
        var afterid = dropNode.data.id;
        sortModify({
          id: id,
          preOutlineId: afterid,
        }).then((res) => {
          if (res.code == 200) {
            this.getcustomList();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
              showClose: true,
            });
          }
        });
      } else if (dropType == "before") {
        var id = draggingNode.data.id;
        var afterid = "";
        this.left_data.forEach((item) => {
          item.children.forEach((val, index) => {
            if (val.id == dropNode.data.id) {
              if (index > 0) {
                afterid = item.children[index - 1].id;
              } else {
                afterid = null;
              }
            }
          });
        });
        sortModify({
          id: id,
          preOutlineId: afterid,
        }).then((res) => {
          if (res.code == 200) {
            this.getcustomList();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
              showClose: true,
            });
          }
        });
      }
    },
    clickSmallHandle() {
      this.isSelect = !this.isSelect;
      if (this.isSubject) {
        this.isSubject = false;
      }
    },
    clickBigHanlde() {
      this.isSubject = !this.isSubject;
      if (this.isSelect) {
        this.isSelect = false;
      }
    },
    touchRIghtHandle() {
      if (this.isSubject) {
        this.isSubject = false;
      }
      if (this.isSelect) {
        this.isSelect = false;
      }
    },
    changeSelectHandleTwo(val) {
      this.selectBig_name = [];
      this.big_data.forEach((item) => {
        if (item.value) {
          this.selectBig_name.push(item.name);
        }
      });
    },
    changeSelectHandle(val) {
      this.select_name = [];
      this.select_idList = [];
      this.small_data.forEach((item) => {
        if (item.value) {
          this.select_name.push(item.name);
          this.select_idList.push(item.id);
        }
      });
    },
    blurHanlde(item) {
      item.fousShow = true;
    },
    focusHanlde(item) {
      item.fousShow = false;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    changSummary(item) {
      editCustom({
        id: item.id,
        name: item.name,
        analysisSummary: item.analysisSummary,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    showIsmodel(data) {
      this.small_data.forEach((item) => {
        item.value = false;
      });
      this.fisrtShow = false;
      this.secondShow = false;
      this.firstDimType = "";
      this.startYear = "";
      this.endYear = "";
      this.secondDimType = "";
      this.startRank = "";
      this.endRank = "";
      this.search_name = [];
      this.select_id = [];
      this.select_name = [];
      this.select_idList = [];
      this.small_data.forEach((item) => {
        if (item.id == data.paramConfigCustom.analysisDatasetId) {
          this.select_name.push(item.name);
          this.select_idList.push(item.id);
          item.value = true;
        }
      });
      if (data.paramConfigCustom.dimension == 1) {
        this.firstDimFieldShow = data.paramConfigCustom.firstDimFieldShow;
        this.fisrtShow = true;
        if (data.paramConfigCustom.firstDimType == "TIME") {
          this.firstDimType = "time";
          this.startYear = data.paramConfigCustom.firstDimRangeStart;
          this.endYear = data.paramConfigCustom.firstDimRangeEnd;
        }
        if (data.paramConfigCustom.firstDimType == "RANK") {
          this.firstDimType = "rank";
          this.startYear = data.paramConfigCustom.firstDimRangeStart;
          this.endYear = data.paramConfigCustom.firstDimRangeEnd;
        }
        if (data.paramConfigCustom.firstDimType == "EntityType") {
          this.firstDimType = "EntityType";
        }
      } else if (data.paramConfigCustom.dimension == 2) {
        this.firstDimFieldShow = data.paramConfigCustom.firstDimFieldShow;
        this.secondDimFieldShow = data.paramConfigCustom.secondDimFieldShow;
        this.fisrtShow = true;
        this.secondShow = true;
        if (data.paramConfigCustom.firstDimType == "TIME") {
          this.firstDimType = "time";
          this.startYear = data.paramConfigCustom.firstDimRangeStart;
          this.endYear = data.paramConfigCustom.firstDimRangeEnd;
        }
        if (data.paramConfigCustom.firstDimType == "RANK") {
          this.firstDimType = "rank";
          this.startYear = data.paramConfigCustom.firstDimRangeStart;
          this.endYear = data.paramConfigCustom.firstDimRangeEnd;
        }
        if (data.paramConfigCustom.secondDimType == "TIME") {
          this.secondDimType = "time";
          this.startRank = data.paramConfigCustom.secondDimRangeStart;
          this.endRank = data.paramConfigCustom.secondDimRangeEnd;
        }
        if (data.paramConfigCustom.secondDimType == "RANK") {
          this.secondDimType = "rank";
          this.startRank = data.paramConfigCustom.secondDimRangeStart;
          this.endRank = data.paramConfigCustom.secondDimRangeEnd;
        }
        
      }

      this.fenxiID = data.paramConfigCustom.id;
      this.isModel = true;
    },
    subjectdatasetListGo() {
      // subjectList({
      //   name: this.big_search,
      // }).then((res) => {
      //   if (res.code == 200) {
      //     this.big_data = res.rows;
      //   } else {
      //     this.$message({
      //       message: res.msg,
      //       type: "error",
      //       showClose: true,
      //     });
      //   }
      // });
      analysisList({
        name: this.search_name,
      }).then((res) => {
        if (res.code == 200) {
          this.small_data = res.rows;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    scrollToSection(id) {
      const element = document.getElementById(id);
      if (element) {
        const offset = 0; // 可以根据需要调整偏移量
        element.scrollIntoView({
          behavior: "smooth",
          block: "end",
          inline: "nearest",
          offsetTop: offset,
        });
      }
    },
    getTemplateIndex(data) {
      let index = this.left_data.findIndex((item) => item.id == data.id);
      this.templateIndex = index;
    },
    addNameHandle(val) {
      this.addname = val.id;
      this.select_id = this.left_data[this.templateIndex].id;
      this.addanalysisHandle();
    },
    addanalysisHandle() {
      addCustom({
        id: this.addname,
        parentId: this.select_id,
        reportId: this.reportId,
      }).then((res) => {
        if (res.code == 200) {
          this.addname = "";
          this.isanalyzepage = false;
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.getcustomList();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    addCustomhadnle(data) {
      this.select_id = data.id;
      this.isanalyzepage = true;
    },
    getcustomList() {
      customList(`?reportId=${this.reportId}`).then((res) => {
        if (res.length > 0) {
          res.forEach((item) => {
            if (!item.children) {
              item.children = [];
            }
          });
          this.left_data = res;
          this.left_data.forEach((item) => {
            this.$set(item, "isAdd", true);
          });

          this.data = res;
          this.data.forEach((item) => {
            item.children.forEach((val) => {
              val.chartList = [
                {
                  chartType: "line",
                },
              ];
              this.$set(val, "fousShow", true);

              val.tableData = {
                rows: [],
                titles: [],
              };
            });
          });
          this.idArray = [];
          this.data.forEach((item) => {
            item.children.forEach((v) => {
              this.idArray.push(v.id);
            });
          });
          this.templateListHandle();
        }
      });
    },
    getReportTitle() {
      fetchReportTitle(this.reportId).then((res) => {
        this.reportId = res.data.name;
      });
    },
    getEntityTypes() {
      fetchEntityTypes().then((res) => {
        this.entityTypesList = res.data;
      });
    },
    handGo() {
      if (this.$store.state.index.routerPath !== "") {
        if (
          this.$router.currentRoute.path !== this.$store.state.index.routerPath
        ) {
          this.$router.push(this.$store.state.index.routerPath);
        }
      }
    },
    // 切换类型
    handSelectChange(item) {
      this.selectData = item;
    },
    // 图表
    handAddChart() {
      this.isChart = false;
    },
    deldelCustomHandle() {
      delCustom(this.select_id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.delShow = false;
          this.getcustomList();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    append(data) {
      this.select_id = data.id;
      this.delShow = true;
      // const newChild = { id: id++, label: "testtest", children: [] };
      // if (!data.children) {
      //   this.$set(data, "children", []);
      // }
      // data.children.push(newChild);
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    templateListHandle() {
      templateList(`?reportId=''`).then((res) => {
        if (res.length > 0) {
          this.template_list = res;
          this.getReportContentHandle();
        }
      });
    },
    getReportContentHandle() {
      getReportContent(this.idArray).then((res) => {
        if (res.code == 200) {
          // this.data[this.data.length - 1].children[0].tableData =
          //   res.data[3].reportTable || [];

          // this.data[this.data.length - 1].children[1].tableData =
          //   res.data[4].reportTable || [];
          this.data.forEach((item) => {
            if (item.children.length > 0) {
              item.children.forEach((val) => {
                this.idArray.forEach((e, index) => {
                  if (val.id == e) {
                    val.paramConfigCustom = res.data[index].paramConfigCustom;
                    val.tableData = res.data[index].reportTable;
                    val.tableData.titles = val.tableData.titles.map(
                      (title) => ({
                        label: title,
                      })
                    );
                    val.tableData.titles.forEach((item, index) => {
                      item.prop = "val" + index;
                      item.isBtn = false;
                    });

                    // val.tableData.titles.push(
                    //   {
                    //     label: "关键词",
                    //     prop: "text",
                    //     isBtn: true,
                    //   },
                    //   {
                    //     label: "类专利列表",
                    //     prop: "list",
                    //     isBtn: true,
                    //   },
                    //   {
                    //     label: "操作",
                    //     prop: "option",
                    //     isBtn: true,
                    //   }
                    // );
                    let graph = res.data[index].reportGraph;
                    if (!graph) {
                      val.chartList = [];
                    }
                    // 展示图标 线形
                    if (val.graphType == "LINE") {
                      this.$nextTick(() => {
                        let echartid = val.id;
                        let chartDom = document.getElementById(echartid);
                        let myChart = echarts.init(chartDom);
                        let option;

                        let graph = res.data[index].reportGraph;
                        let series_list = [];
                        let name_list = [];
                        graph.series.forEach((item) => {
                          let data_list = [];
                          item.forEach((val) => {
                            data_list.push(val.value);
                          });
                          series_list.push({
                            name: item[0].name,
                            type: "line",
                            data: data_list,
                          });
                          name_list.push(item[0].name);
                        });

                        option = {
                          title: {
                            text: "",
                          },
                          tooltip: {
                            trigger: "axis",
                          },
                          legend: {
                            data: name_list,
                            type: "scroll",
                          },
                          grid: {
                            left: "3%",
                            right: "4%",
                            bottom: "3%",
                            containLabel: true,
                          },

                          xAxis: {
                            type: "category",
                            boundaryGap: false,
                            data: graph.xaxis,
                          },
                          yAxis: {
                            type: "value",
                          },
                          series: series_list,
                        };

                        option && myChart.setOption(option);
                      });
                    }

                    // 饼形
                    if (val.graphType == "PIE") {
                      this.$nextTick(() => {
                        let echartid = val.id;
                        let chartDom = document.getElementById(echartid);
                        let myChart = echarts.init(chartDom);
                        let option;

                        let graph = res.data[index].reportGraph;

                        option = {
                          tooltip: {
                            trigger: "item",
                          },
                          legend: {
                            orient: "vertical",
                            left: "left",
                          },
                          series: [
                            {
                              name: "Access From",
                              type: "pie",
                              radius: "50%",
                              data: graph.data,
                              emphasis: {
                                itemStyle: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                              },
                            },
                          ],
                        };

                        option && myChart.setOption(option);
                      });
                    }

                    // 散点图
                    if (val.graphType == "SCATTER_PLOT") {
                      this.$nextTick(() => {
                        let echartid = val.id;
                        let chartDom = document.getElementById(echartid);
                        let myChart = echarts.init(chartDom);
                        let option;

                        let graph = res.data[index].reportGraph;

                        option = {
                          xAxis: {
                            type: "category",
                            data: graph.xaxis,
                            boundaryGap: false,
                            splitLine: {
                              show: true,
                            },
                            axisLine: {
                              show: false,
                            },
                          },
                          yAxis: {},
                          series: [],
                        };
                        option.series = graph.series.map((item) => ({
                          type: "scatter",
                          emphasis: {
                            focus: "series",
                          },
                          name: item[0].name,
                          data: item.map((val) => val.value),
                        }));

                        option && myChart.setOption(option);
                      });
                    }

                    // 柱状图
                    if (val.graphType == "BAR") {
                      this.$nextTick(() => {
                        let echartid = val.id;
                        let chartDom = document.getElementById(echartid);
                        let myChart = echarts.init(chartDom);
                        let option;

                        let graph = res.data[index].reportGraph;
                        option = {
                          xAxis: {
                            type: "category",
                            data: graph.xaxis,
                          },
                          tooltip: {
                            trigger: "axis",
                            axisPointer: {
                              type: "shadow",
                            },
                          },
                          legend: {},
                          yAxis: {
                            type: "value",
                          },
                          series: [],
                        };

                        option.series = graph.series.map((item) => ({
                          type: "bar",

                          data: item.map((val) => val.value),
                        }));

                        option && myChart.setOption(option);
                      });
                    }

                    // 堆积柱状图
                    if (val.graphType == "BAR_STACK") {
                      this.$nextTick(() => {
                        let echartid = val.id;
                        let chartDom = document.getElementById(echartid);
                        let myChart = echarts.init(chartDom);
                        let option;

                        let graph = res.data[index].reportGraph;
                        option = {
                          tooltip: {
                            trigger: "axis",
                            axisPointer: {
                              type: "shadow",
                            },
                          },
                          legend: {},
                          grid: {
                            left: "3%",
                            right: "4%",
                            bottom: "3%",
                            containLabel: true,
                          },
                          xAxis: [
                            {
                              type: "category",
                              data: graph.xaxis,
                            },
                          ],
                          yAxis: [
                            {
                              type: "value",
                            },
                          ],
                          series: [],
                        };

                        option.series = graph.series.map((item) => ({
                          type: "bar",
                          emphasis: {
                            focus: "series",
                          },
                          name: item[0].name,
                          data: item.map((val) => val.value),
                        }));

                        option && myChart.setOption(option);
                      });
                    }

                    // 地图
                    if (val.graphType == "MAP") {
                      this.$nextTick(() => {
                        let echartid = val.id;
                        let chartDom = document.getElementById(echartid);
                        let myChart = echarts.init(chartDom);
                        let option;

                        let graph = res.data[index].reportGraph;
                        const mapData = graph.series[0];
                        // [
                        //   { name: "中国", value: 722 },
                        //   // 其他国家的数据...
                        // ];

                        // 使用 ECharts 初始化地图
                        echarts.registerMap("world", require("./map.json"));

                        // ECharts 图表选项配置
                        option = {
                          tooltip: {
                            trigger: "item",
                            formatter: "{b}: {c}",
                          },
                          tooltip: {
                            trigger: "item",
                          },
                          //左侧小导航图标
                          visualMap: {
                            show: true,
                            x: "left",
                            y: "center",
                            splitList: [
                              { start: 1000 },
                              { start: 700, end: 999 },
                              { start: 500, end: 699 },
                              { start: 100, end: 499 },
                              { start: 10, end: 99 },
                              { start: 0, end: 10 },
                            ],
                            color: [
                              "#5475f5",
                              "#9feaa5",
                              "#85daef",
                              "#74e2ca",
                              "#e6ac53",
                              "#9fb5ea",
                            ],
                          },

                          series: [
                            {
                              type: "map",
                              map: "world",
                              roam: true,
                              name: item.name,
                              data: mapData,
                            },
                          ],
                        };

                        option && myChart.setOption(option);
                      });
                    }

                    //关系图
                    if (val.graphType == "RELATIONSHIP") {
                      this.$nextTick(() => {
                        let echartid = val.id;
                        let chartDom = document.getElementById(echartid);
                        let myChart = echarts.init(chartDom);
                        let option;

                        let graph = res.data[index].reportGraph;
                        graph.nodes.forEach((item) => {
                          item.symbolSize = 16.6666666666666665;
                        });

                        // 使用 ECharts 初始化地图

                        // ECharts 图表选项配置
                        option = {
                          title: {
                            text: "",
                            subtext: "",
                            top: "bottom",
                            left: "right",
                          },

                          tooltip: {},
                          legend: {
                            type: "scroll",
                            orient: "horizontal",
                            left: "5%",
                            data: graph.categories.map(function (a) {
                              return a.name;
                            }),
                          },
                          grid: {
                            left: 10,
                            right: 10,
                            bottom: 10,
                            containLabel: true,
                          },
                          animationDuration: 1500,
                          animationEasingUpdate: "quinticInOut",
                          series: [
                            {
                              name: "Les Miserables",
                              type: "graph",
                              layout: "force",
                              data: graph.nodes,
                              links: graph.links,
                              categories: graph.categories,
                              roam: false,
                              label: {
                                position: "right",
                                formatter: "{b}",
                              },
                              lineStyle: {
                                color: "source",
                                curveness: 0.3,
                              },
                              emphasis: {
                                focus: "adjacency",
                                lineStyle: {
                                  width: 10,
                                },
                              },
                            },
                          ],
                        };

                        option && myChart.setOption(option);
                      });
                    }

                    //桑吉图
                    if (val.graphType == "SANKEY") {
                      this.$nextTick(() => {
                        let echartid = val.id;
                        let chartDom = document.getElementById(echartid);
                        let myChart = echarts.init(chartDom);
                        let option;

                        let graph = res.data[index].reportGraph;

                        // 使用 ECharts 初始化地图

                        // ECharts 图表选项配置
                        option = {
                          title: {
                            text: "",
                          },
                          tooltip: {
                            trigger: "item",
                            triggerOn: "mousemove",
                          },

                          series: [
                            {
                              type: "sankey",
                              data: graph.nodes,
                              links: graph.links,
                              emphasis: {
                                focus: "adjacency",
                              },
                              left: "2%",
                              height: "100%",
                              width: "100%",
                              label: {
                                show: true,
                                formatter: function (params) {
                                  let maxLength = 10; // 设置最大长度为 5
                                  let label = params.name || "";
                                  if (label.length > maxLength) {
                                    // 超过最大长度时，截取前 5 个字符并添加省略号
                                    label = label.substr(0, maxLength) + "...";
                                  }
                                  return label;
                                },
                                textStyle: {
                                  fontSize: 10,
                                  // fontWeight: "bold",
                                },
                              },
                              levels: [
                                {
                                  depth: 0,
                                  itemStyle: {
                                    color: "#fbb4ae",
                                  },
                                  lineStyle: {
                                    color: "source",
                                    opacity: 0.6,
                                  },
                                },
                                {
                                  depth: 1,
                                  itemStyle: {
                                    color: "#b3cde3",
                                  },
                                  lineStyle: {
                                    color: "source",
                                    opacity: 0.6,
                                  },
                                },
                                {
                                  depth: 2,
                                  itemStyle: {
                                    color: "#ccebc5",
                                  },
                                  lineStyle: {
                                    color: "source",
                                    opacity: 0.6,
                                  },
                                },
                                {
                                  depth: 3,
                                  itemStyle: {
                                    color: "#decbe4",
                                  },
                                  lineStyle: {
                                    color: "source",
                                    opacity: 0.6,
                                  },
                                },
                              ],
                              lineStyle: {
                                curveness: 0.5,
                              },
                            },
                          ],
                        };

                        option && myChart.setOption(option);
                      });
                    }
                  }
                });
              });
            }
          });
        } else {
        }
      });
    },
    handleNodeClick(node) {
      this.scrollToSection(node.id);
    },
    // 显示抽屉
    handShowDrawe(item) {
      if (item.prop === "text") {
        // 关键词
        this.drawerText = true;
      } else {
        // 类专利
        this.drawerSubject = true;
      }
    },
    // 分页
    handleSizeChange(val) {
    },
    handleCurrentChange(val) {
    },
    // 关闭提示
    handMaskClose() {
      this.isMask = false;
      this.isTolTip = 1;
    },
  },
};
</script>

<style lang="scss">
.custom-tree-node__add .el-popover {
  padding: 20px;
  font-size: 12px;
  color: #333;
}

.message-popover {
  padding: 10px !important;
  padding-bottom: 20px !important;
}

.report-content-temp-title .el-input__inner {
  border: none !important;
  color: #313131;
  padding: 0;
}

.report-content-temp-title1 .el-input__inner {
  border: none !important;
  color: #313131;
  padding: 0;
}

// .report-content-temp-text {

// }
// .el-input--prefix .el-textarea {
//   border: none;
//   background-color: rgba(255, 255, 255, 0);
// }
.inputaear .el-textarea__inner {
  border: none !important;
  resize: none;
}

.el-table .warning-row {
  background: #f9fafb;
}

.el-table .success-row {
  background: #fff;
}

.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}

.el-table__body-wrapper {
  overflow-x: auto;
}

.el-table__body-wrapper::-webkit-scrollbar {
  height: 6px;
  /* 设置滚动条高度 */
}

.del-btn {
  background: #fff5f4;
  border-radius: 6px 6px 6px 6px;
  color: #ff3838;
}

.popover-list {
  padding: 0 24px;
  box-sizing: border-box;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
}

.popover-item {
  margin-top: 14px;
  font-size: 14px;
  color: #313131;
  font-style: normal;
  cursor: pointer;
}

.el-table .el-table__header th {
  background: #f9fafb;
}

.el-range-editor--mini .el-range-separator {
  line-height: 32px;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #4c56bb;
  background: #4c56bb;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #4c56bb;
  background: #4c56bb;
}

.thr-select {
  flex: 1 !important;
  height: 28px;
  background: #ffffff;
  border-radius: 6px;
  opacity: 1;
  border: 1px solid #e7e7e7;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .thr-select-playolder {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #a7a7a7;
    line-height: 24px;
    width: 140px;
    white-space: nowrap;
    /*规定段落中的文本不进行换行*/
    overflow: hidden;
    /*内容会被修剪，并且其余内容是不可见的。*/
    text-overflow: elli;
  }

  .thr-select-name {
    color: #000000;
  }

  .thr-select-line {
    width: 1px;
    height: 100%;
    background: #d7dfe9;
    margin-right: 8px;
  }

  .thr-select-icon {
    font-size: 16px;
    color: #d7dfe9;
  }

  .thr-select-popup {
    width: 320px;
    // height: auto;
    max-height: 266px;
    position: absolute;
    top: 44px;
    left: -90px;
    padding: 24px;
    box-sizing: border-box;
    z-index: 9;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
    overflow-y: scroll;
  }

  .thr-select-ul {
    margin-top: 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .thr-select-li {
    height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 24px;
    cursor: pointer;

    &>span {
      margin-left: 4px;
    }
  }
}

// .el-scrollbar .el-scrollbar__wrap {
//         overflow-x: hidden !important;
//       }
//       .el-tree > .el-tree-node {
//         height: 350px; //这里的高根据实际情况
//         min-width: 100%;
//         display: inline-block;
//       }
.tabler-tr {
  display: flex;
}

.analyzepage-dialog {
  .el-dialog__header {
    padding: 24px;
  }

  .el-dialog__body {
    padding: 0 24px;
  }

  .el-dialog__footer {
    padding: 24px;
  }

  .analyzepage-dialog__body {
    .analyzepage-dialog__body-temp {
      width: 100%;
      display: flex;
      align-items: center;
      height: 46px;
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0 !important;
      }

      &>div {
        width: fit-content;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-right: 24px;
      }

      .analyzepage-dialog__body-temp-ipt {
        flex: 1;
        height: 100%;
      }
    }

    .upload-demo {
      width: 100% !important;
      border-radius: 0 !important;

      .el-upload {
        width: 100% !important;
        margin-bottom: 24px;
      }

      .el-upload-dragger {
        width: 100% !important;
        border-radius: 0 !important;
      }

      .el-upload__text {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .upload-demo-upload {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 24px;
        cursor: pointer;
      }

      .upload-demo-img {
        width: 60px;
        height: 60px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 10px;
      }

      .el-upload-dragger {
        padding-top: 16px;
      }
    }
  }
}

.report-header-loginout {
  margin-left: 8px;
  color: red;
  cursor: pointer;
}

.report-left-tree {
  .el-tree {
    background: transparent !important;
    overflow-y: scroll;
    height: calc(100vh - 200px);
    padding-right: 24px;
    box-sizing: border-box;

    .el-tree-node__expand-icon {
      padding-left: 0 !important;
      color: #000;
    }

    .is-leaf {
      color: transparent !important;
    }

    .custom-tree-node__label {
      font-size: 13px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #313131;
      line-height: 16px;

      &>span:first-child {
        margin-right: 4px;
      }
    }

    .custom-tree-node__add {
      display: none;
    }

    .custom-tree-node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .el-tree-node__content {
      height: 36px !important;

      &:hover {
        .custom-tree-node__label {
          color: #4c56bb !important;
        }

        .custom-tree-node__add {
          display: inline-block;
          color: #4c56bb !important;
        }
      }
    }
  }
}

.report-content-right-btn {
  .el-button {
    width: 100% !important;
    background: #4c56bb !important;
    height: 40px;
    border: none;
  }
}

.report-btn-btn {
  width: fit-content;
  height: 40px;
  background: #ffffff;
  border-radius: 6px;
  opacity: 1;
  border: 1px solid #4c56bb;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #4c56bb;
  line-height: 24px;
  cursor: pointer;

  &>i {
    margin-left: 8px;
  }

  padding: 0 15px;
}

.report-left {
  margin-left: 8px;
}

.report-popup {
  padding: 16px 24px !important;

  .el-popover__title {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
    margin-bottom: 14px !important;
  }

  .report-popup-centen {
    &>div {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #313131;
      line-height: 16px;
      height: 20px;
      width: 100%;
      margin-bottom: 12px;

      &:last-child {
        margin: 0 !important;
      }

      cursor: pointer;
    }
  }
}

.report-text-drawer {
  width: 326px !important;
  padding: 16px 24px !important;
  box-sizing: border-box;

  .el-drawer__header {
    box-sizing: border-box;
    padding: 0 0 24px 0 !important;
    border-bottom: 1px solid #e7e7e7;
    font-size: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 20px;
    margin-bottom: 24px !important;
  }

  .report-text-box {
    height: calc(100% - 64px);
    width: 100%;

    .report-text-box-header {
      height: 32px;
      width: 100%;
    }

    .report-text-box-temp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #313131;
      line-height: 12px;
      height: 32px;
      width: 100%;
    }

    .report-text-box-body {
      height: calc(100% - 32px - 24px);
      width: 100%;
      overflow: auto;
      margin-bottom: 24px;
    }

    .report-text-box-btm {
      width: 100%;
      height: 40px;
      background: #4c56bb;
      border-radius: 6px;
      opacity: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: Inter, Inter;
      font-weight: 500;
      color: #ffffff;
      line-height: 24px;
    }
  }
}

.report-subject-drawer {
  width: 621px !important;
  padding: 16px 24px !important;
  box-sizing: border-box;

  .el-drawer__header {
    box-sizing: border-box;
    padding: 0 0 24px 0 !important;
    border-bottom: 1px solid #e7e7e7;
    font-size: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 20px;
    margin-bottom: 24px !important;
  }

  .report-subject-right-body {
    height: calc(100% - 64px);
    width: 100%;
    overflow-y: auto;

    .report-subject-right-temp {
      height: auto;
      width: 100%;
      position: relative;
      background: #ffffff;
      border-bottom: 1px solid #e7e7e7;
      box-sizing: border-box;
      padding: 0 0 24px 32px;
      cursor: pointer;
    }

    .report-subject-right-temp-checkbox {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .report-subject-right-temp-body {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .report-subject-right-temp-title {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #4c56bb;
        line-height: 19px;
        margin-bottom: 8px;
      }

      .report-subject-right-temp-content {
        flex: 1;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 16px;
        margin-bottom: 8px;
      }

      .report-subject-right-temp-ul {
        display: flex;
        align-items: center;
        height: 24px;
        width: 100%;

        .report-subject-right-temp-li {
          height: 24px;
          background: #ffffff;
          border-radius: 6px;
          opacity: 1;
          border: 1px solid #d7dfe9;
          box-sizing: border-box;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #5e718d;
          line-height: 20px;
          padding: 0 8px;
        }
      }
    }
  }

  .report-subject-right-btm {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-top: 24px;
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.report {
  width: 100%;
  height: 100%;
  background: #f3f6f9;
  display: flex;
  flex-direction: column;
  position: relative;

  .report-header {
    width: 100%;
    height: 63px;
    background: #4c56bb;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;

    .report-header-img {
      width: 236px;
      height: 31px;
      background: url("./assets/images/title.png") no-repeat;
      background-size: 100%;
    }

    .report-header-admin {
      display: flex;
      align-items: center;
      width: auto;

      .report-header-admin__img {
        width: 20px;
        height: 20px;

        margin-right: 8px;

        .user-img {
          max-width: 20px;
          max-height: 20px;
        }
      }

      .report-header-admin__name {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 16px;
        margin-right: 8px;
      }

      .report-header-admin__icon {
        color: #fff;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }

  .report-body {
    height: calc(100% - 63px);
    width: 100%;
  }

  .report-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;

    .report-mask-toltip {
      width: 220px;
      height: 112px;
      position: absolute;
      background: #fff;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
      z-index: 999;
      padding: 16px;
      box-sizing: border-box;

      .report-mask-toltip-centen {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 19px;
        margin-bottom: 12px;
      }

      .report-mask-toltip-btm {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 19px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .toltip-one {
      top: 90px;
      left: 160px;

      &::after {
        content: " ";
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-right: 16px solid #fff;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        left: -16px;
        transform: translate(0, -50%);
      }
    }

    .toltip-two {
      top: 400px;
      left: 900px;

      &::after {
        content: " ";
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-right: 16px solid #fff;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        left: -16px;
        transform: translate(0, -50%);
      }
    }

    .toltip-three {
      top: 90px;
      right: 340px;
      height: 134px !important;

      &::after {
        content: " ";
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-left: 16px solid #fff;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        right: -16px;
        transform: translate(0, -50%);
      }
    }

    .toltip-four {
      top: 30px;
      right: 120px;

      &::after {
        content: " ";
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-left: 16px solid #fff;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        right: -16px;
        transform: translate(0, -50%);
      }
    }
  }

  .report-title {
    width: 100%;
    min-height: 65px;
    background: #ffffff;
    border-bottom: 1px solid #e7e7e7;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 24px;
    justify-content: space-between;

    .report-btn {
      display: flex;
      align-items: center;
    }

    .report-btn-add {
      height: 24px;
      width: fit-content;
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;

      &>img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }

      margin-right: 80px;

      .report-btn-add-title {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 16px;

        &:hover {
          color: #4c56bb !important;
        }
      }

      .report-btn-add-popup {
        position: absolute;
        top: 40px;
        right: 0;
        width: 600px;
        height: 400px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
        z-index: 14;
        padding: 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .report-btn-add-popup-left {
          width: 150px;
          height: 100%;
          background: #f4f6f9;
          border-radius: 8px;
          overflow: auto;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #000000;
          padding: 12px 12px 0;
          box-sizing: border-box;
          line-height: 16px;

          .report-btn-add-popup-left-li {
            height: 36px;
            width: 100%;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 12px;
            padding: 0 8px;
            box-sizing: border-box;
          }

          .report-btn-add-popup-left-li-select {
            background: #4c56bb;
            color: #fff !important;
          }
        }

        .report-btn-add-popup-right {
          display: flex;
          align-items: flex-start;
          flex-wrap: wrap;
          height: 100%;
          width: 100%;
          padding: 12px;
          box-sizing: border-box;

          .report-btn-add-popup-right-li {
            border: 1px solid #e7e7e7;
            padding: 8px 16px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #000000;
            margin-right: 8px;
            cursor: pointer;
            border-radius: 8px;
          }
        }
      }
    }
  }

  .report-go {
    width: fit-content;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #313131;
    line-height: 16px;
    cursor: pointer;

    &>i {
      color: #000 !important;
      margin-right: 8px;
    }
  }

  .report-content {
    width: 100%;
    flex: 1;
    display: flex;

    .report-content-left {
      width: 240px;
      height: 100%;
      // padding: 24px;
      padding-left: 24px;
      padding-top: 24px;
      padding-bottom: 24px;
      box-sizing: border-box;

      .report-left-title {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #313131;
        line-height: 19px;
        height: 22px;
        margin-bottom: 24px;
      }
    }

    .report-content-body {
      flex: 1;
      height: calc(100vh - 128px);
      background: #ffffff;
      padding: 40px 40px 8px 40px;
      box-sizing: border-box;
      overflow: hidden;
      overflow-y: scroll;

      .report-content-title {
        height: 56px;
        font-size: 40px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #313131;
        line-height: 47px;
        width: 100%;
        margin-bottom: 24px;
      }

      .report-content-date {
        height: 20px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #6c6c6c;
        line-height: 16px;
        width: 100%;
        margin-bottom: 24px;
      }

      .report-content-box {
        // height: calc(100% - 172px);
        width: 100%;
        overflow-y: auto;

        .report-content-temp {
          height: auto;

          .report-content-temp-text {
            width: 100%;
            height: auto;
            padding: 16px;
            box-sizing: border-box;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #313131;
            line-height: 30px;
            margin-bottom: 8px;
          }

          .report-content-temp-texted {
            width: 100%;
            height: auto;
            padding-top: 16px;
            box-sizing: border-box;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #313131;
            line-height: 30px;
            margin-bottom: 8px;
          }

          .report-content-temp-title {
            width: 100%;
            box-sizing: border-box;
            font-size: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            color: #313131;
            margin-bottom: 8px;

            .el-input {
              .el-input__inner {
                border: none !important;
              }
            }
          }

          .report-content-temp-title1 {
padding-left: 24px;
            width: 100%;
            box-sizing: border-box;
            font-size: 18px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #313131;
            margin-bottom: 8px;
          }

          .report-content-temp-chart {
            height: auto;
            width: 100%;
            position: relative;

            &>i {
              font-size: 24px;
              color: #000000;
              position: absolute;
              top: 20;
              right: 0;
              z-index: 1;
              cursor: pointer;
            }

            .report-content-temp-chart-temp {
              height: 500px;
              width: 100%;

              .report-content-temp-chart-box {
                height: calc(100% - 44px);
                // height: 800px;
                width: 100%;
              }
            }

            .report-content-temp-chart-title {
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #313131;
              line-height: 16px;
              height: 20px;
              margin: 12px 0;
              text-align: center;
            }
          }

          .report-content-temp-table {
            position: relative;

            &>i {
              font-size: 24px;
              color: #000000;
              position: absolute;
              top: 0;
              right: 0;
              z-index: 1;
              cursor: pointer;
            }
          }

          .tabler-tr {
            display: flex;
            width: 100%;
          }

          .textflow {
            overflow: hidden; //超出文本隐藏
            white-space: nowrap; //不换行，只显示一行
            text-overflow: ellipsis; //超出部分省略号显示
          }

          .tabler-tr-item {
            display: flex;
            width: 25%;
            border: 1px solid #dddddd;
            background-color: #f2f2f2;
            justify-content: center;
            align-content: center;
            padding: 8px;
            box-sizing: border-box;
          }
        }
      }
    }

    .report-content-right {
      width: 340px;
      font-size: 13px;
      padding: 24px;
      box-sizing: border-box;

      .el-divider__text {
        background: #f3f6f9;
      }



      .report-content-right-model {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #313131;
        line-height: 19px;
        cursor: pointer;

        &>i {
          margin-right: 4px;
        }
      }

      .report-content-right-nomodel {
        .datafilter-dialog__body-temp {
          width: 100%;
          display: flex;
          align-items: center;
          height: 46px;
          margin-top: 15px;

          &:last-child {
            margin-bottom: 0 !important;
          }

          &>div {
            width: fit-content;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 24px;
            margin-right: 24px;
          }

          .datafilter-dialog__body-temp-ipt {
            flex: 1;
            height: 100%;
          }
        }

        .report-content-right-title {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          color: #313131;
          line-height: 19px;
          margin-bottom: 24px;
          cursor: pointer;

          &>i {
            margin-right: 4px;
          }
        }

        .report-content-right-tiao {
          margin: 12px 0;
          width: 100%;
          display: flex;
          align-items: center;

          .report-content-right-tiao-label {
            // width: 120px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #000000;
            // line-height: 24px;
            margin-right: 24px;
          }

          .report-content-right-tiao-box {
            // width: calc(100% - 120px);
            // flex: 1;
            padding-right: 0 !important;
          }
        }

        .report-content-right-btn {
          margin-top: 12px;
          width: 100%;
        }
      }
    }
  }
}
</style>
